﻿/*导航*/
.sub_con{position:fixed; top:0; left:0; width: 100%;height:100%;z-index:99;display:none;}
.sub_con a{display:block; width:6.625rem;height:3.55rem;}
.sub_con a img{width: 100%; display: block;}
.nav-position{position: relative;}
.nav-position .po-lf{position: absolute;top:5rem;left: 2rem;}
.nav-position .po-rt{position: absolute;top:5rem;left: 9.5rem;}
.nav-position .po-t{top:0rem;}
.nav-position .po-t1{top:4rem;}
.nav-position .po-t2{top:8.1rem;}
.nav-position .po-t3{top:11.9rem;}
.nav-position .po-t4{top:11.675rem;}
.nav-position .nav-img7{margin-left:3.8rem;}


.sub-main{width: 100%;}
.delay-1{-webkit-animation-delay: 0.3s;animation-delay:0.3s;}
.delay-2{-webkit-animation-delay: 0.5s;animation-delay:0.5s;}
.delay-31{-webkit-animation-delay: 0.7s;animation-delay:0.7s;}
.delay-3{-webkit-animation-delay: 0.8s;animation-delay:0.8s;}
.delay-4{-webkit-animation-delay: 1.1s;animation-delay:1.1s;}
.delay-5{-webkit-animation-delay: 1.3s;animation-delay:1.3s;}
.delay-6{-webkit-animation-delay: 1.5s;animation-delay:1.5s;}
.delay-7{-webkit-animation-delay: 1.7s;animation-delay:1.7s;}
.delay-8{-webkit-animation-delay: 1.9s;animation-delay:1.9s;}
.sub-head{position: relative; width: 100%;height:31.3rem;background: url(../images/sub-head.jpg) no-repeat center center; background-size: 100% 100%; overflow: hidden;}
.sub-head1{position: absolute; top:2.2rem;left:7.125rem; width:3.15rem;height:3rem; background: url(../images/sub-head1.png) no-repeat center center; background-size: 100% 100%;}
.sub-head2{position: absolute; top:0;right:0; width:100%;height:5.475rem; background: url(../images/sub-head2.png) no-repeat center center; background-size: 100% 100%;}
.sub-head2-wrap{position: absolute; top:5.2rem;left:8.15rem; width:1rem;overflow: hidden;}
.sub-head3{position: absolute; top:4.8rem;left:2.975rem; width:12.875rem;height:15.275rem; background: url(../images/sub-head3.png) no-repeat center center; background-size: 100% 100%;}
.sub-head4{position: absolute; top:12.425rem;left:2.1rem; width:3.275rem;height:.75rem;}
.sub-head5{position: absolute; top:12.425rem;left:12.4rem; width:3.525rem;height:.725rem;}
.sub-head6{ position: absolute;left:0;bottom:1.8rem ;width: 100%;height: 15.575rem;background: url(../images/scqj.gif) no-repeat center center;background-size: 100% 100%;}
.sub-head7{position: absolute; bottom:6.05rem;left:10.9rem; width:5.45rem;height:4.95rem;background: url(../images/scqj-head7.png) no-repeat center center; background-size: 100% 100%;}
.waves li {
  position: relative;
  width: 3.275rem;
  height: .125rem;
  margin-bottom:.175rem;
}
.waves li span {
  position: absolute;
  right: 0;
  display: block;
  background: url(../images/sub-line.jpg)no-repeat;
  background-size: 100% 100%;
}
.waves1 li span{
  left: 0;
} 
.waves .li1 span {
  width: 75%;
  height: .125rem;
  animation: waves 0.9s linear 0s infinite alternate;
  -webkit-animation:  waves 0.9s linear 0s infinite alternate;;
}

.waves .li2 span {
  width: 100%;
  height: .125rem;
  animation: waves 1s linear 0s infinite alternate;
  -webkit-animation: waves 1s linear 0s infinite alternate;
}

.waves .li3 span {
  width: 75%;
  height: .125rem;
  animation: waves 0.7s linear 0s infinite alternate;
  -webkit-animation: waves 0.7s linear 0s infinite alternate;
}

/*目录导航*/
.nav-btn{ position:fixed;right:10px; top:10px;z-index:300;width:2.8rem;height:1.925rem; 
  background: url(../images/sub-close.png) no-repeat center center; background-size: 100% 100%; overflow: hidden;animation:tipAnimateb 2s infinite .2s ease;-webkit-animation:tipAnimateb 2s infinite .2s ease;}
/* 下一页 & 回到首页 */
.next-bg{position: relative;width: 100%; height:9.6rem;overflow: hidden;background:url(../images/next-bg.jpg) no-repeat;background-size: 100% 100%}
.next-bg a{position: absolute;top: 2.2rem; left: 7.025rem;display: block;overflow: hidden;z-index: 20;}
.next-img{display: block;width:4.35rem;height:1.525rem;}
.next-img-wrap{animation:height3 2s infinite  ease-out;-webkit-animation:height3 2s infinite ease-out;}
.next-3{position: absolute;left: 6.875rem;top:2.65rem ;width: 4.15rem;height: 5.525rem;background: url(../images/next-3.png) no-repeat;background-size: 100% 100%;animation:height2 2s infinite  ease-out;-webkit-animation:height2 2s infinite ease-out;}
.next-4{position: absolute;left: 11.475rem;top:5.675rem ;width: 1.525rem;height: 1.525rem;background: url(../images/next-4.png) no-repeat;background-size: 100% 100%;animation: music-rotating 4s linear infinite;-webkit-animation: music-rotating 4s linear infinite;}
/* 头部动画 */
.height3{
  -webkit-animation-name: height3;
  animation-name: height3;
}
@-webkit-keyframes height3 {
 0%{-webkit-transform:translateY(0)}
 50%{-webkit-transform:translateY(0.5rem) }
 100%{-webkit-transform:translateY(0)}
}

@keyframes height3 {
  0%{transform:translateY(0)}
  50%{transform:translateY(0.5rem) }
  100%{transform:translateY(0)}
}
.height2{
  -webkit-animation-name: height2;
  animation-name: height2;
}
@-webkit-keyframes height2 {
 0%{-webkit-transform: scaleY(1);transform-origin: bottom center;}
 50%{-webkit-transform: scaleY(0.9);transform-origin: bottom center;}
 100%{-webkit-transform: scaleY(1);transform-origin: bottom center;}
}

@keyframes height2 {
  0%{transform: scaleY(1);transform-origin: bottom center;}
  50%{transform: scaleY(0.9);transform-origin: bottom center;}
  100%{transform: scaleY(1);transform-origin: bottom center;}

}
.height1{
  -webkit-animation-name: height1;
  animation-name: height1;
}
@-webkit-keyframes height1 {
 0%{height: 0}
 100%{height:5.475rem;}
}

@keyframes height1 {
  0%{height: 0}
  100%{height:5.475rem;}
}
@-webkit-keyframes waves {
  10% {
    width:20%;
  }
  20% {
    width:60%;
  }
  40% {
    width:40%;
  }
  50% {
    width:100%;
  }
  100% {
    width:50%;
  }
}

@keyframes waves {
  10% {
    width:20%;
  }
  20% {
    width:60%;
  }
  40% {
    width:40%;
  }
  50% {
    width:100%;
  }
  100% {
    width:50%;
  }
}
@keyframes tipAnimateb{
   0%{opacity:1;}
    50%{opacity: 0.7;}
    100%{opacity:1;}
}
@-webkit-keyframes tipAnimateb{
   0%{opacity:1;}
    50%{opacity: 0.7;}
    100%{opacity:1;}
}
/* 底部动画 */
@-webkit-keyframes tipAnimateb2{
   0%{opacity:1;}
    50%{opacity: 0.4;}
    100%{opacity:1;}
}

@keyframes tipAnimateb2{
   0%{opacity:1;}
    50%{opacity: 0.4;}
    100%{opacity:1; }
}

@-webkit-keyframes music-rotating {
  from{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  to{
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
  }
}

@keyframes music-rotating {
   from{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   to{
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
}
